<template>
  <div class="create-sop-main">
    <NavigationBarBack title="创建新客户SOP" />
    <div class="create-sop-wrap">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
          </div>
          <div class="card-body">
            <div class="alter-box">
              <div class="warning-svg">
                <svg-icon class-name="warning-svg" icon-class="warning" />
              </div>
              <div class="waring-text">
                <div>
                  新好友添加后自动创建SOP任务，可根据标签区分；创建规则后需应用到单号模式下生效，也可在单号模式下个性配置；<br/>
                  一个新好友只能触发一次新客户SOP，按照按性别＞直接＞按企微标签＞按智能标签优先级触发；<br/>
                  其中同一个类型中同时有多个符合条件的规则，随机触发一个；
                </div>
              </div>
            </div>
            <el-form ref="form" :model="form" label-width="120px" class="create-sop-form" label-position="left">
              <el-form-item label="所属公司：">
                <div class="company-name">安徽志新科技有限公司</div>
              </el-form-item>
              <el-form-item label="下发企微号：">
                <el-radio-group v-model="form.radio">
                  <el-radio :label="0">按性别触发</el-radio>
                  <el-radio :label="1">加好友后直接触发</el-radio>
                  <el-radio :label="2">按标签触发</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择性别：" v-if="form.radio === 0">
                <el-checkbox-group v-model="form.gender">
                  <el-checkbox :label="1">男</el-checkbox>
                  <el-checkbox :label="0">女</el-checkbox>
                  <el-checkbox :label="2">未知</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="触发标签："  v-if="form.radio === 2">
                <div class="flex-rows-tag">
                  <el-select
                    v-model="form.labeltype"
                    placeholder=""
                    size="small"
                  >
                    <el-option label="含任意企微标签" :value="1"></el-option>
                    <el-option label="含所有企微标签" :value="2"></el-option>
                  </el-select>
                  <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt' />
                </div>
                <div class="flex-rows-tag">
                  <el-select
                    v-model="form.labeltype"
                    placeholder=""
                    size="small"
                  >
                    <el-option label="含任意企微标签" :value="1"></el-option>
                    <el-option label="含所有企微标签" :value="2"></el-option>
                  </el-select>
                  <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt' />
                </div>
              </el-form-item>
              <el-form-item label="排除标签：">
                <div class="tag-content">
                  <el-switch size="small" v-model="form.other"/>
                  <span style="margin-left: 8px;">开启后将排除满足以下条件的客户</span>
                </div>
              </el-form-item>
              <el-form-item label="效果追踪：">
                <el-switch size="small" v-model="form.switch"/>
              </el-form-item>
              <el-form-item label="SOP模版：">
                <el-select
                v-model="form.labeltype"
                placeholder=""
                size="small"
                style="width: 115px"
              >
                <el-option label="企业模板库" :value="1"></el-option>
                <el-option label="个人模板库" :value="2"></el-option>
              </el-select>
              <el-select
                v-model="form.labeltype"
                placeholder=""
                size="small"
                style="width: 340px"
              >
                <el-option label="含任意关键词" :value="0">
                  <span class="select-label">11111</span>
                  <span class="select-tag">标准模板</span>
                </el-option>
                <el-option label="含任意关键词" :value="1">
                  <span class="select-label">11111</span>
                  <span class="select-tag">标准模板</span>
                </el-option>
              </el-select>
              <el-button type="primary" icon="el-icon-plus" size="small" style="margin-left: 8px;" />
              <div class="desc">标准SOP只能调用“标准模板”</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="create-sop-footer">
      <el-button size="small" plain>取消</el-button>
      <el-button size="small" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import MultipleSelect from '@/components/MultipleSelect'
import NavigationBarBack from '@/components/NavigationBarBack'
export default {
  data() {
    return {
      customer: 0,
      form: {
        customer: 0,
        customerGroup: 0,
        switch: false,
        labeltype: 1,
        radio: 2,
        gender: [1],
      },
      lableOpt:[
        {value:1,label:'客户等级',children:['一般','重要','核心']},
        {value:2,label:'客户等级2',children:['一般2','重要2','核心2']}
      ]
    }
  },
  components: {
    NavigationBarBack,
    MultipleSelect
  }
}
</script>
<style lang="scss" scoped>
.create-sop-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
  .create-sop-wrap {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
  
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
  
        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;
  
          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }
  
        .card-body {
          padding: 24px;
  
          .alter-box {
            box-sizing: border-box;
            margin: 0;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;
  
            .warning-svg {
              font-size: 18px;
            }
  
            .waring-text {
              margin-left: 8px;
            }
          }
  
          .create-sop-form {
            margin-top: 20px;
            .flex-rows-tag {
              display: grid;
              column-gap: 8px;
              grid-template-columns: 136px 500px;
              &:not(:first-child) {
                margin-top: 10px;
              }
            }
            .tag-content {
              padding: 8px 12px;
              margin-bottom: 10px;
              background-color: rgb(245, 245, 245);
              color: rgb(255, 105, 0);
              vertical-align: middle;
            }
            .desc {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
              margin: 8px 0px 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  .create-sop-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.select-label {
  float: left;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}
.select-tag {
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 2px 7px;
  float: right;
  font-weight: 400;
  color: rgba(0,0,0,.65);
  font-size: 12px;
  margin: auto;
} 
</style>